<template>
  <div id="admins" v-loading="loading">
    <ul class="userMenu">
      <li v-for="(item,index) in userCommonMenu" class="clearfix" :key="index">
        <span class="fl text-clip" style="width:180px;padding-left: 20px;" @click="menuClick(item.MenuId,item)">
          <a-tooltip :mouseLeaveDelay="0">
            <template slot='title'>
              {{item.MenusName}}
            </template>
            {{item.MenusName}}
          </a-tooltip>
        </span>
        <div class="handle fr">
          <div class="hide" style="display:inline-block;">
            <!-- 上移动 -->
            <a-icon v-if="index > 0" class="icon hide" title="上移" type="arrow-up" @click="upMove(item,index)"/>
            <!-- 下移动 -->
            <a-icon v-if="userCommonMenu.length - 1 != index" class="icon hide" title="下移" type="arrow-down" @click="downMove(item,index)"/>
          </div>
          <!-- 删除 -->
          <a-icon class="icon" title="从我的常用功能移除" @click="delMenu(item)" type="minus" />
        </div>
      </li>
    </ul>
  </div>
</template>
<script type="text/javascript">
  import Vue from 'vue'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
export default {
  props:["menuId"],
  data() {
    return {
      loading:true,
      userCommonMenu:[],
    }
  },
  mounted() {
    this.getAdminList()
  },
  watch:{
    menuId: {
      handler(val) {
        this.getAdminList();
      },
      deep: true
    }
  },
  methods: {
    menuClick(name,item) {
      let url = item.OutUrl;
      //需要IE打开
      if (url.indexOf('bisp://cmd/?指定浏览器打开链接||') == 0 || url.indexOf('bisp://cmd/?openlinkbywebbrowser||') == 0) {
        //url = url.replace("#", "");
        window.open(url,"_parent");
        return;
      }
      //ftp
      if(url.startsWith('ftp://')){
        window.open(url,"_blank");
        return;
      }
      //TODO

      // 特殊处理
      if(item.MenusName.indexOf('“一张图”数据管理') == 0 ){
        window.open(url);
        return
      }
      this.$router.push({ name: name });
    },
    delMenu(item){
      let that = this;
      let params = {
        typeId : 3,
        menuId : item.MenuId,
        ticket : Vue.ls.get(ACCESS_TOKEN),
        path : process.env.VUE_APP_ADD_HTTP
      };
      this.loading = true;
      this.getRequest("/common/UpdateFrenquentFunIndex",params).then(res => {
        that.getAdminList();
      })
    },
    upMove(item,index){
      let that = this;
      let meunIds = [];
      that.userCommonMenu.forEach((value) => {
        meunIds.push(value.MenuId)
      })
      let currentVal = meunIds[index-1];
      that.$set(meunIds,index-1,meunIds[index]);
      that.$set(meunIds,index,currentVal);
      let params = {
        typeId : 1,
        menuIds : JSON.stringify(meunIds),
        ticket : Vue.ls.get(ACCESS_TOKEN),
        path : process.env.VUE_APP_ADD_HTTP
      };
      this.loading = true;
      this.getRequest("/common/UpdateFrenquentFunIndex",params).then(res => {
        that.getAdminList();
      })
    },
    downMove(item,index){
      let that = this;
      let meunIds = [];
      that.userCommonMenu.forEach((value) => {
        meunIds.push(value.MenuId)
      })
      let currentVal = meunIds[index+1];
      that.$set(meunIds,index+1,meunIds[index]);
      that.$set(meunIds,index,currentVal);
      let params = {
        typeId : 1,
        menuIds : JSON.stringify(meunIds),
        ticket : Vue.ls.get(ACCESS_TOKEN),
        path : process.env.VUE_APP_ADD_HTTP
      };
      this.loading = true;
      this.getRequest("/common/UpdateFrenquentFunIndex",params).then(res => {
        that.getAdminList();
      })
    },
    getAdminList() {
      let that = this;
      let params = {
        TaskType: 1
      }
      this.getRequest("/UserMenu/GetUserCommonMenu", params)
        .then(res => {
          this.loading = false;
          that.userCommonMenu = res;
        })
    },
  }
}
</script>
<style scoped>
.atable .ant-table-tbody>tr>td {
  border: none !important;
  /*padding: 0!important;*/
}

.ant-table-tbody>tr>td {
  padding: 12px 8px !important;
}

.atable .ant-table-thead>tr>th,
.atable .ant-table-tbody>tr>td {
  padding: 12px 8px !important;
}

.handle i {
  margin-right: 5px;
}

.handle:hover a {
  display: block !important;
}

.userMenu {
  margin-top: 20px;
  margin-bottom: 200px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65) !important;
  cursor: pointer;
}

.userMenu li {
  padding: 15px 10px;
  transition: all .3s;
}

.userMenu li:hover {
  color: #ffffff !important;
  background-color: #1890FF !important;
}

.userMenu li:hover .hide {
  display: inline-block !important;
}
</style>